<template>
	<el-dialog :title="title" v-model="drawer" width="700px" :append-to-body="true" @close="close">
		<el-form :model="form" :rules="rules" size="small" label-width="150px" ref="ruleRefForm" class="refForm">
			<el-form-item label="标题:" prop="title">
				<el-input v-model="form.title" placeholder="请输入标题"></el-input>
			</el-form-item>
			<el-form-item label="作者:" prop="author">
				<el-input v-model="form.author" placeholder="请输入作者"></el-input>
			</el-form-item>
			<el-form-item label="文章摘要" prop="articleAbstract">
				<el-input v-model="form.articleAbstract" type="textarea" />
			</el-form-item>
			<!-- <el-form-item label="文章标签" prop="tag">
				<el-input v-model="form.tag"/>
			</el-form-item> -->
			<el-form-item label="显示平台" prop="showPlatform">
				<el-radio-group v-model="form.showPlatform">
					<el-radio :label="0">小程序</el-radio>
					<el-radio :label="1">PC官网</el-radio>
					<el-radio :label="2">全部</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="关联导航栏" prop="navIds" v-if="form.showPlatform != '0'">
				<el-select v-model="form.navIds" multiple placeholder="选择导航栏" style="width: 240px">
					<el-option v-for="item in navList" :key="item.id" 
						:label="item.navBarName"
						:value="item.id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="请关联商品">
				<el-tag class="spec-tag" v-for="(item, index) in form.knowledgeArticleSkuRelations" :key="item.skuId"
					closable size="small" style="margin-right:10px;height: 25px;" effect="light"
					@close="delSpu(index)">{{ item.skuName }}</el-tag>
				<el-button type="primary" @click="selectShopList">关联商品</el-button>
			</el-form-item>
			<el-form-item label="状态:" prop="type">
				<el-radio-group v-model="form.status">
					<el-radio :label="0">发布</el-radio>
					<el-radio :label="1">关闭</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="商品详情:">
				<Editor v-model="form.articleDesc" />
			</el-form-item>

		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" size="small" @click="submitForm(ruleRefForm)">保存</el-button>
				<el-button size="small" @click="resetForm(ruleRefForm)">取消</el-button>
			</span>
		</template>
	</el-dialog>


	<select-shop v-model:dialogDrawer="dialogShopVisible" title="关联商品" :is-batch="true"
		@onSelectSubmit="selectShopSubmit"></select-shop>

</template>

<script>
import {
	computed,
	reactive,
	toRefs,
	ref
} from 'vue'
import {
	ElMessage,
	ElMessageBox
} from 'element-plus'
import { create, update } from '/@/api/pms/article'
import SelectShop from './SelectShop.vue'
import Editor from '/@/components/editor/index.vue'
import { Message } from '@element-plus/icons-vue'
import api from '/@/api/commonApi'
export default {
	name: 'ArticleDetail',
	props: {
		dialogDrawer: {
			type: Boolean,
			default: false
		},
		defaultForm: {
			type: Object,
			default() {
				return {}
			}
		},
		title: {
			type: String,
			default: '新增'
		},
		navList: {
			type: Array,
			default: () => []
		}
	},
	components: {
		SelectShop,
		Editor
	},
	setup(props, context) {
		const {
			dialogDrawer,
			defaultForm
		} = toRefs(props)
		const ruleRefForm = ref()
		const drawer = computed({
			get: () => dialogDrawer.value,
			set: val => {
				context.emit('update:dialogDrawer', val)
			}
		})
		let form = computed({
			get: () => defaultForm.value,
			set: val => {
				context.emit('update:defaultForm', val)
			}
		})
		const state = reactive({
			isCover: 0,
			showWarning: false,
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
			rules: {
				title: [{
					required: true,
					message: '请输入优惠卡名称',
					trigger: 'blur'
				}],
				articleAbstract: [{
					required: true,
					message: '请输入文章摘要',
					trigger: 'blur'
				}],
				// author: [{
				// 	required: true,
				// 	message: '请输入作者名称',
				// 	trigger: 'blur'
				// }],

			},
			dialogShopVisible: false
		})
		const close = () => {
			context.emit('update:dialogDrawer', false)
		}
		const submitForm = async (formEl) => {
			if (!formEl) return
			await formEl.validate((valid) => {
				if (valid) {
					let data = form.value
					if (data.showPlatform != '0') {
						if (data.navIds.length == 0) {
							ElMessage.error("请选择关联的导航栏")							
						}else if(state.isCover == 1){
							if (data.id != null && data.id != '') {
								update(data).then(res => {
									if (res.code == 0) {
										ElMessage.success("修改成功");
										context.emit('onDetailSubmit', true)
									} else {
										ElMessage.error("修改失败");
									}
								})
							}
							// 新增
							else {
								create(data).then(res => {
									if (res.code == 0) {
										ElMessage.success("添加成功");
										context.emit('onDetailSubmit', true)
									} else {
										ElMessage.error("添加失败");
									}
								})

							}
						}else{
							api.isSubmit({navIds: data.navIds}).then(res => {
								if (res.data == 1) {
									if (data.id != null && data.id != '') {
										update(data).then(res => {
											if (res.code == 0) {
												ElMessage.success("修改成功");
												context.emit('onDetailSubmit', true)
											} else {
												ElMessage.error("修改失败");
											}
										})
									}
									// 新增
									else {
										create(data).then(res => {
											if (res.code == 0) {
												ElMessage.success("添加成功");
												context.emit('onDetailSubmit', true)
											} else {
												ElMessage.error("添加失败");
											}
										})

									}
								}else{
									ElMessageBox.confirm('已有显示文章，是否覆盖？',  'Warning', {
										confirmButtonText: '覆盖',
										cancelButtonText: '取消',
										type: 'warning',
									}).then(() => {
										state.isCover = 1
										submitForm(formEl)
									})
									.catch(() => {
										ElMessage({
											type: 'info',
											message: '取消覆盖',
										})
									})
								}
							})
						}
					}else{
						if (data.id != null && data.id != '') {
							update(data).then(res => {
								if (res.code == 0) {
									ElMessage.success("修改成功");
									context.emit('onDetailSubmit', true)
								} else {
									ElMessage.error("修改失败");
								}
							})
						}
						// 新增
						else {
							create(data).then(res => {
								if (res.code == 0) {
									ElMessage.success("添加成功");
									context.emit('onDetailSubmit', true)
								} else {
									ElMessage.error("添加失败");
								}
							})

						}
					}
				}
			})

		}
		const resetForm = (formEl) => {
			if (!formEl) return
			context.emit('update:dialogDrawer', false)
			formEl.resetFields()
		}


		// 关联商品
		const selectShopList = () => {
			state.dialogShopVisible = true
		}
		const selectShopSubmit = (data) => {
			let v = []
			for (let d of data) {
				v.push({ skuId: d.id, skuName: d.spuName })
			}
			state.dialogShopVisible = false
			form.value.knowledgeArticleSkuRelations = v
		}
		//移除商品
		const delSpu = (index) => {
			form.value.knowledgeArticleSkuRelations.splice(index, 1)
		}

		return {
			drawer,
			form,
			submitForm,
			resetForm,
			close,
			ruleRefForm,
			selectShopList,
			selectShopSubmit,
			delSpu,
			...toRefs(state)
		}
	}

}
</script>

<style>

</style>
